<script setup>
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Plus,
  Search,
  Edit,
  View,
  Delete,
  RefreshRight,
} from "@element-plus/icons-vue";
import {
  getGoodsList,
  getGoodsCategories,
  addGoods,
  updateGoods,
} from "../../api/goods";
import SupplierSelect from "./components/SupplierSelect.vue";
import Drawer from "../../components/Drawer.vue";

const loading = ref(false);
const tableData = ref([]);
const total = ref(0);

// 搜索和分页参数
const queryParams = reactive({
  page: 1,
  pageSize: 10,
  keyword: "",
  cateId: null,
  status: null,
  supplierId: null,
});

// 动态分类选项
const categoryOptions = ref([]);

// 搜索表单状态
const searchForm = reactive({
  code: "",
  name: "",
  category: null,
  status: null,
  supplierId: null,
});

// 供应商
const allSuppliers = ref([]);
const handleSuppliersLoaded = (data) => {
  allSuppliers.value = data;
};

// 根据库存判断样式
const getStockClass = (row) => {
  if (
    !row.stock_alert_min ||
    !row.stock_alert_max ||
    row.safety_stock === undefined ||
    row.current_stock === undefined
  ) {
    return "safety-stock";
  }

  const currentStock = parseFloat(row.current_stock);
  const safetyStock = parseFloat(row.safety_stock);
  const minRatio = parseFloat(row.stock_alert_min);
  const maxRatio = parseFloat(row.stock_alert_max);

  // 计算预警阈值
  const minThreshold = safetyStock * minRatio;
  const maxThreshold = safetyStock * maxRatio;
  // 库存不足（红色）: 当前库存低于最低阈值
  if (currentStock < minThreshold) {
    return "low-stock";
  } // 库存过剩（蓝色）: 当前库存高于最高阈值
  else if (currentStock > maxThreshold) {
    return "over-stock";
  } // 警告/低库存（黄色）: 当前库存介于最低阈值和安全库存之间
  else if (currentStock < safetyStock) {
    return "warning-stock";
  } // 标准（黑色）: 当前库存介于最大阈值和安全库存之间
  return "safety-stock";
};

const defaultFormData = {
  goods_id: null,
  code: "",
  name: "",
  cate_id: null,
  specification: "",
  unit: "",
  in_price: 0.0,
  out_price: 0.0,
  safety_stock: 0.0,
  supplier_id: null,
  note: "",
  status: 1,
  // purchaseCount: 0,
};
const formData = reactive({ ...defaultFormData });
const formRef = ref(null);
const originalFormData = reactive({ ...defaultFormData });

// 表单校验规则
const rules = reactive({
  name: [
    { required: true, message: "食材名称不能为空", trigger: "blur" },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9\s()（）-]{2,100}$/,
      message: "名称格式不正确 (2-100字)",
      trigger: "blur",
    },
  ],
  cate_id: [{ required: true, message: "请选择食材分类", trigger: "change" }],
  specification: [
    { required: true, message: "规格型号不能为空", trigger: "blur" },
    {
      min: 2,
      max: 100,
      message: "规格型号长度在 2 到 100 个字符之间",
      trigger: "blur",
    },
  ],
  unit: [{ required: true, message: "单位不能为空", trigger: "blur" }],
  in_price: [
    { required: true, message: "入库单价不能为空" },
    {
      type: "number",
      min: 0,
      message: "入库单价必须是大于等于零的数字",
      trigger: "blur",
    },
  ],
  out_price: [
    { required: true, message: "出库单价不能为空" },
    {
      type: "number",
      min: 0,
      message: "出库单价必须是大于等于零的数字",
      trigger: "blur",
    },
  ],
  safety_stock: [
    { required: true, message: "安全库存不能为空" },
    {
      type: "number",
      min: 0,
      message: "安全库存必须是大于等于零的数字",
      trigger: "blur",
    },
  ],
  supplier_id: [{ required: true, message: "请选择供应商", trigger: "blur" }],
});

const drawer = reactive({
  visible: false,
  title: "",
  type: "add",
  id: null,
});

// 获取分类数据
async function loadCategories() {
  try {
    const res = await getGoodsCategories();
    if (res.code === 0 && res.data) {
      categoryOptions.value = res.data.map((item) => ({
        value: item.id,
        label: item.name,
      }));
    }
  } catch (error) {
    console.error("获取食材分类失败:", error);
  }
}
// 获取食材列表
async function loadGoodsList(resetPage = false) {
  if (resetPage) {
    queryParams.page = 1;
  }

  loading.value = true;
  try {
    const params = {
      page: queryParams.page,
      pageSize: queryParams.pageSize,
      keyword: queryParams.keyword,
      cateId: queryParams.cateId,
      status: queryParams.status,
      supplierId: queryParams.supplierId,
    };

    const res = await getGoodsList(params);

    if (res.code === 0 && res.data) {
      tableData.value = res.data.data || [];
      total.value = res.data.total || 0;

      queryParams.page = res.data.page;
      queryParams.pageSize = res.data.pageSize;
    } else {
      ElMessage.error(res.msg || "获取食材列表失败");
      tableData.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error("获取食材列表失败:", error);
    ElMessage.error("获取食材列表失败，请检查网络服务");
    tableData.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
}

// 搜索/筛选
const handleSearch = () => {
  const keywordParts = [];
  if (searchForm.code) keywordParts.push(searchForm.code);
  if (searchForm.name) keywordParts.push(searchForm.name);
  queryParams.keyword = keywordParts.join(" ");
  queryParams.cateId = searchForm.category || null;
  queryParams.status = searchForm.status;
  queryParams.supplierId = searchForm.supplierId || null;

  loadGoodsList(true);
};

const handleReset = () => {
  // 重置搜索表单
  searchForm.code = "";
  searchForm.name = "";
  searchForm.category = null;
  searchForm.status = null;
  searchForm.supplierId = null;
  handleSearch();
};

// 检查当前表单数据是否与原始数据相同
const isFormDataChanged = computed(() => {
  const currentData = JSON.parse(JSON.stringify(formData));
  const originalData = JSON.parse(JSON.stringify(originalFormData));

  delete currentData.code;
  delete currentData.goods_id;
  delete currentData.purchaseCount;
  delete originalData.code;
  delete originalData.goods_id;
  delete originalData.purchaseCount;
  const allKeys = new Set([
    ...Object.keys(currentData),
    ...Object.keys(originalData),
  ]);

  for (const key of allKeys) {
    const currentValue = String(currentData[key] ?? "");
    const originalValue = String(originalData[key] ?? "");
    if (key === "status") {
      if (Number(currentValue) !== Number(originalValue)) {
        return true;
      }
      continue;
    }

    if (currentValue !== originalValue) {
      return true;
    }
  }
  return false;
});
const openDrawer = (type, row = null) => {
  drawer.type = type;

  Object.assign(formData, defaultFormData);
  Object.assign(originalFormData, defaultFormData);

  if (type === "add") {
    formData.code = "保存后自动生成";
    Object.assign(originalFormData, defaultFormData);
    originalFormData.code = "保存后自动生成";
  } else if (row) {
    const newFormData = {
      ...row,
      specification: row.specification || "",
      note: row.note || "",
      supplier_id: row.supplier_id || null,
      safety_stock: parseFloat(row.safety_stock) || 0.0,
      in_price: parseFloat(row.in_price) || 0.0,
      out_price: parseFloat(row.out_price) || 0.0,
      status: row.status !== undefined ? Number(row.status) : 1,
    };
    Object.assign(formData, newFormData);
    Object.assign(originalFormData, newFormData);
  }

  drawer.title =
    type === "add" ? "新增食材" : type === "edit" ? "编辑食材" : "查看食材";
  drawer.id = row ? row.goods_id : null;
  drawer.visible = true;

  nextTick(() => {
    formRef.value?.clearValidate();
  });
};

// 弹窗确认关闭抽屉
const handleCloseDrawer = (done) => {
  if (drawer.type === "view") {
    done();
    return;
  }
  if (!isFormDataChanged.value) {
    done();
    return;
  }
  ElMessageBox.confirm(
    "当前表单数据尚未保存，确定要放弃修改并关闭吗?",
    "放弃修改并关闭",
    {
      confirmButtonText: "确定放弃并关闭",
      cancelButtonText: "返回编辑",
      type: "warning",
      closeOnClickModal: false,
    }
  )
    .then(() => {
      done();
    })
    .catch(() => {
      // 取消关闭操作，留在抽屉
    });
};

// 抽屉底部的取消按钮
const handleCancel = () => {
  if (drawer.type === "view") {
    drawer.visible = false;
    return;
  }
  if (!isFormDataChanged.value) {
    drawer.visible = false;
    return;
  }

  ElMessageBox.confirm(
    "当前表单数据尚未保存，确定要放弃修改并关闭吗?",
    "放弃修改并关闭",
    {
      confirmButtonText: "确定放弃并关闭",
      cancelButtonText: "返回编辑",
      type: "warning",
      closeOnClickModal: false,
      dangerouslyUseHTMLString: true,
    }
  )
    .then(() => {
      drawer.visible = false;
    })
    .catch(() => {});
};

const handleSave = async () => {
  // 前端表单校验
  const valid = await formRef.value.validate((isValid, fields) => {
    if (!isValid) {
      console.error("表单校验失败:", fields);
    }
    return isValid;
  });
  if (!valid) {
    ElMessage.error("请检查表单输入是否正确");
    return;
  }
  // 保存确认
  ElMessageBox.confirm(
    `确认要${drawer.type === "add" ? "新增" : "更新"}食材【${
      formData.name
    }】吗?`,
    "操作确认",
    {
      confirmButtonText: "确定保存",
      cancelButtonText: "取消",
      type: "info",
    }
  )
    .then(async () => {
      await executeSubmit();
    })
    .catch(() => {
      ElMessage.info("已取消保存");
    });
};

// 实际提交
const executeSubmit = async () => {
  let apiCall;
  let successMsg = "";

  const data = {
    name: formData.name,
    cate_id: formData.cate_id,
    unit: formData.unit,
    specification: formData.specification,
    safety_stock: Number(formData.safety_stock).toFixed(1),
    in_price: Number(formData.in_price).toFixed(2),
    out_price: Number(formData.out_price).toFixed(2),
    supplier_id: formData.supplier_id,
    note: formData.note,
    status: formData.status,
  };

  if (drawer.type === "add") {
    apiCall = addGoods(data);
    successMsg = "新增食材成功！";
  } else if (drawer.type === "edit") {
    apiCall = updateGoods(drawer.id, data);
    successMsg = "编辑食材成功！";
  }

  try {
    const res = await apiCall;
    if (res.code === 0) {
      ElMessage.success(res.msg || successMsg);
      drawer.visible = false;
      Object.assign(formData, defaultFormData);
      loadGoodsList(true);
    } else {
      ElMessage.error(res.msg || "操作失败");
    }
  } catch (error) {
    console.error("提交失败:", error);
    ElMessage.error(error.message || "提交失败，请检查网络或后端服务");
  }
};

// 状态变更
const handleChangeStatus = (row) => {
  const currentStatus = Number(row.status);
  const newStatus = currentStatus === 1 ? 0 : 1;
  const actionText = currentStatus === 1 ? "停用" : "恢复";
  const type = currentStatus === 1 ? "warning" : "info";
  const title = currentStatus === 1 ? "警告" : "操作确认";

  ElMessageBox.confirm(
    `此操作将**${actionText}**食材【${row.name}】，是否继续?`,
    title,
    {
      confirmButtonText: `确定${actionText}`,
      cancelButtonText: "取消",
      type: type,
      dangerouslyUseHTMLString: true,
    }
  )
    .then(async () => {
      try {
        const data = {
          name: row.name,
          cate_id: row.cate_id,
          unit: row.unit,
          specification: row.specification,
          safety_stock: Number(row.safety_stock).toFixed(1),
          in_price: Number(row.in_price).toFixed(2),
          out_price: Number(row.out_price).toFixed(2),
          supplier_id: row.supplier_id,
          note: row.note || "",
          status: newStatus, // 仅修改状态
        };

        const res = await updateGoods(row.goods_id, data);
        if (res.code === 0) {
          ElMessage.success(res.msg || `食材已成功${actionText}！`);
          loadGoodsList();
        } else {
          ElMessage.error(res.msg || `${actionText}操作失败`);
        }
      } catch (error) {
        console.error(`${actionText}失败:`, error);
        ElMessage.error(`${actionText}操作失败，请检查网络或后端服务`);
      }
    })
    .catch(() => {
      ElMessage.info("已取消操作");
    });
};

// 分页事件处理
const handleSizeChange = (val) => {
  queryParams.pageSize = val;
  loadGoodsList(true);
};

const handleCurrentChange = (val) => {
  queryParams.page = val;
  loadGoodsList();
};

const selectedSupplierInfo = computed(() => {
  if (!formData.supplier_id) {
    return "未关联供应商";
  }
  const supplier = allSuppliers.value.find(
    (item) => item.id === formData.supplier_id
  );
  return supplier ? supplier.fullInfoLabel || supplier.name : "供应商信息缺失";
});

onMounted(() => {
  loadCategories();
  loadGoodsList();
});
</script>
<template>
  <div class="good-container">
    <el-card class="main-card" shadow="never">
      <div class="card-header">
        <h3>
          <el-icon style="color: black"><Chicken /></el-icon> 食材管理
        </h3>
        <el-button type="primary" :icon="Plus" @click="openDrawer('add')">
          新增食材
        </el-button>
      </div>

      <el-form :inline="true" :model="searchForm" class="filter-form-inline">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="食材编号">
              <el-input
                v-model="searchForm.code"
                placeholder="请输入食材编号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="食材名称">
              <el-input
                v-model="searchForm.name"
                placeholder="请输入食材名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="食材分类">
              <el-select
                v-model="searchForm.category"
                placeholder="全部"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in categoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="食材状态">
              <el-select
                v-model="searchForm.status"
                placeholder="全部"
                clearable
                style="width: 100%"
              >
                <el-option label="已启用" :value="1" />
                <el-option label="已停用" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="供应商">
              <SupplierSelect
                v-model="searchForm.supplierId"
                placeholder="全部"
                :show-all-status="true"
                @loaded="handleSuppliersLoaded"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" class="action-buttons-col">
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch"
                >搜索</el-button
              >
              <el-button @click="handleReset" :icon="RefreshRight"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        header-cell-class-name="table-header-cell"
        row-class-name="custom-table-row"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column
          prop="code"
          label="食材编号"
          width="110"
          align="center"
        />
        <el-table-column
          prop="name"
          label="食材名称"
          min-width="120"
          align="center"
        />
        <el-table-column
          prop="cate_name"
          label="食材分类"
          width="100"
          align="center"
        />
        <el-table-column
          prop="specification"
          label="规格型号"
          min-width="120"
          align="center"
        />
        <el-table-column prop="unit" label="单位" width="80" align="center" />

        <el-table-column
          prop="safety_stock"
          label="安全库存"
          width="80"
          align="center"
        />
        <el-table-column
          prop="current_stock"
          label="当前库存"
          width="80"
          align="center"
        >
          <template #default="scope">
            <span :class="getStockClass(scope.row)">
              {{ scope.row.current_stock }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="in_price"
          label="入库单价"
          width="100"
          align="center"
        >
          <template #default="scope">
            ¥{{ Number(scope.row.in_price || 0).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="out_price"
          label="出库单价"
          width="100"
          align="center"
        >
          <template #default="scope">
            ¥{{ Number(scope.row.out_price || 0).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right" align="center">
          <template #default="scope">
            <el-button
              link
              type="primary"
              :icon="Edit"
              size="default"
              @click="openDrawer('edit', scope.row)"
              >编辑</el-button
            ><el-button
              link
              type="info"
              :icon="View"
              size="default"
              @click="openDrawer('view', scope.row)"
              >查看</el-button
            ><el-button
              link
              :type="Number(scope.row.status) === 1 ? 'danger' : 'success'"
              :icon="Number(scope.row.status) === 1 ? Delete : RefreshRight"
              size="default"
              @click="handleChangeStatus(scope.row)"
              >{{ Number(scope.row.status) === 1 ? "删除" : "恢复" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container pagination-split">
        <span class="pagination-info">
          共 {{ total }} 条记录，第 {{ queryParams.page }}/{{
            Math.ceil(total / queryParams.pageSize)
          }}
          页
        </span>
        <el-pagination
          v-model:current-page="queryParams.page"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :small="false"
          :disabled="loading"
          :background="true"
          layout=" prev, pager, next, sizes,jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <Drawer
      v-model="drawer.visible"
      :title="drawer.title"
      :type="drawer.type"
      :size="700"
      @save="handleSave"
      @cancel="handleCancel"
      @close-request="handleCloseDrawer"
    >
      <template #default>
        <el-form
          :model="formData"
          :rules="rules"
          ref="formRef"
          label-width="100px"
          label-position="right"
          :disabled="drawer.type === 'view'"
        >
          <h4 class="form-section-title section-padding-bottom">基本信息</h4>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="食材编号" prop="code">
                <el-input
                  v-model="formData.code"
                  placeholder="食材编号"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="食材名称" prop="name" required>
                <el-input
                  v-model="formData.name"
                  placeholder="请输入食材名称"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="食材分类" prop="cate_id" required>
                <el-select
                  v-model="formData.cate_id"
                  placeholder="请选择分类"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in categoryOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格型号" prop="specification" required>
                <el-input
                  v-model="formData.specification"
                  placeholder="请输入规格型号"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="单位" prop="unit" required>
                <el-input v-model="formData.unit" placeholder="请输入单位" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安全库存" prop="safety_stock" required>
                <el-input-number
                  v-model="formData.safety_stock"
                  :min="0"
                  style="width: 100%"
                  controls-position="right"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="入库单价" prop="in_price" required>
                <el-input-number
                  v-model="formData.in_price"
                  :min="0"
                  :precision="2"
                  style="width: 100%"
                  controls-position="right"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出库单价" prop="out_price" required>
                <el-input-number
                  v-model="formData.out_price"
                  :min="0"
                  :precision="2"
                  style="width: 100%"
                  controls-position="right"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="关联供应商" prop="supplier_id" required>
                <SupplierSelect
                  v-if="drawer.type !== 'view'"
                  v-model="formData.supplier_id"
                  placeholder="请选择供应商"
                  :show-all-status="false"
                  @loaded="handleSuppliersLoaded"
                />
                <el-input
                  v-else
                  :model-value="selectedSupplierInfo"
                  readonly
                  disabled
                  placeholder="未关联供应商"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-switch
                  v-model="formData.status"
                  :active-value="1"
                  :inactive-value="0"
                  active-text="启用"
                  inactive-text="停用"
                  :disabled="drawer.type === 'add' || drawer.type === 'view'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12"> </el-col>
          </el-row>

          <h4 class="form-section-title section-padding-bottom">其他</h4>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="采购次数" prop="purchaseCount">
                <el-input v-model="formData.purchaseCount" readonly />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="note">
                <el-input
                  v-model="formData.note"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入备注信息"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>

      <template #footer>
        <div style="flex: auto">
          <el-button @click="handleCancel">取消</el-button>
          <el-button
            v-if="drawer.type !== 'view'"
            type="primary"
            @click="handleSubmit"
            >保存</el-button
          >
        </div>
      </template>
    </Drawer>
  </div>
</template>
<style scoped lang="less">
.good-container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.main-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 18px;
  box-sizing: border-box;
  overflow: hidden;

  :deep(.el-card__body) {
    padding: 0px 15px 15px 15px;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #d9d9d9;

  h3 {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #262626;

    .el-icon {
      margin-right: 8px;
      font-size: 18px;
      color: #1b82f1;
    }
  }
}

.filter-form-inline {
  :deep(.el-form-item__label) {
    width: 80px;
    text-align: right;
  }
  :deep(.el-row:last-child .el-col) {
    margin-bottom: 0;
  }

  .el-form-item {
    margin-right: 0;
    width: 100%;
  }

  .action-buttons-col {
    display: flex;
    align-items: flex-start;
    padding-bottom: 0;

    .el-form-item {
      margin-bottom: 0;
    }

    .el-button {
      margin-left: 10px;

      &:first-child {
        margin-left: 0;
      }
    }
  }
}

:deep(.el-table) {
  .el-table__row {
    // height: 40px;
    .cell {
      line-height: 25px;
    }
  }

  .el-table__header-wrapper th {
    height: 50px;
    color: black;
    background: rgba(247, 247, 247, 0.9);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid rgb(235, 238, 245);
  }

  .el-table__row:hover > td {
    background-color: rgba(247, 247, 247, 0.9);
  }
}

// 库存颜色
.warning-stock {
  color: #fa8c16;
  font-weight: 600;
}
.low-stock {
  color: #f5222d;
  font-weight: 600;
}
.over-stock {
  color: #1890ff;
  font-weight: 600;
}
.safety-stock {
  color: #262626;
}

.pagination-split {
  margin-top: 18px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .pagination-info {
    color: #595959;
    font-size: 14px;
    line-height: 28px;
  }

  :deep(.el-pagination) {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    .el-pagination__total {
      display: none;
    }

    .el-pagination__sizes,
    .el-pagination__jump {
      display: inline-flex;
      align-items: center;
      margin-left: 10px;
      .el-input__inner {
        height: 30px;
        line-height: 30px;
        min-width: 30px;
        border-radius: 6px;
      }
    }

    .btn-prev,
    .btn-next,
    .el-pager li {
      background: white;
      border: 1px solid rgb(217, 217, 217);
      border-radius: 6px;
      color: rgb(38, 38, 38);
      min-width: 30px;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      margin-right: 1px;
    }

    .el-pager li.is-active {
      background: rgb(27, 130, 241);
      border-color: rgb(27, 130, 241);
      color: white;
    }
  }
}

.name-danger {
  color: red;
}
.supplier-status-paused {
  color: orange;
}
.supplier-status-discarded {
  color: red;
}

:deep(.el-drawer__body) {
  padding: 0 25px 20px 25px;
}

.form-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #d9d9d9;
}

.section-padding-bottom {
  margin-bottom: 20px;
}
</style>
